<template>
  <view class="main">
    <view class="segment">
      <view
        class="segment-item"
        v-for="segment in segments"
        :key="segment.current"
        @click="toggleList(segment.current)"
      >
        <text
          class="segment-item-text"
          :class="[current == segment.current ? 'active' : '']"
          >{{ segment.label }}</text
        >
      </view>
    </view>
    <!-- 设备档案 -->
    <view class="equipment-infos" v-if="current === 0">
      <view class="equipment-info">
        <view class="title">基础信息</view>
        <view class="info">
          <view class="content"
            ><text class="text">设备名称：{{ equipment.name }}</text></view
          >
          <view class="content">
            <text class="text"
              >设备ID：{{
                equipment.thingId !== null && equipment.thingId !== ""
                  ? equipment.thingId
                  : "暂无"
              }}</text
            >
            <text class="qrcode" @click="showQRCode = true">查看二维码</text>
          </view>
          <view class="content"
            ><text class="text"
              >编号：{{
                equipment.no !== null && equipment.no !== ""
                  ? equipment.no
                  : "002312"
              }}</text
            ></view
          >
          <view class="content"
            ><text class="text"
              >型号：{{
                equipment.model !== null && equipment.model !== ""
                  ? equipment.model
                  : "B1245"
              }}</text
            ></view
          >
          <view class="content"
            ><text class="text"
              >出产日期：{{
                equipment.produceTime !== null
                  ? getDateTime(equipment.produceTime)
                  : "2020-12-01"
              }}</text
            ></view
          >
          <!-- 暂无 -->
          <view class="content"
            ><text class="text" @click="openService"
              >所属服务商：<text class="service-provider"
                >川润股份科技有限公司</text
              ></text
            ></view
          >
          <view
            class="content"
            @click="showEquipmentTypeEdit = !showEquipmentTypeEdit"
          >
            <view class="text">
              所属分类：
              <view
                class="equipment-type-view"
                v-if="equipmentTypes.length !== 0"
              >
                <view
                  class="equipment-type"
                  v-for="(equipmentType, equipmentTypeIndex) in equipmentTypes"
                  :key="equipmentTypeIndex"
                >
                  <text
                    class="equipment-type-text"
                    :class="[isEditEquipmentType ? 'delete-operation' : '']"
                    @click="deleteEquipmentType(equipmentType)"
                  >
                    {{ equipmentType }}
                    <text v-if="isEditEquipmentType" class="delete">x</text>
                  </text>
                  {{
                    equipmentTypeIndex !== equipmentTypes.length - 1 ? "，" : ""
                  }}
                </view>
              </view>
              <text v-else> 未分类 </text>
            </view>
            <image
              class="equipment-type-right-icon"
              :src="baseStaticUrl + '/static/my-img/shezhi_arrow@2x.png'"
              mode="widthFix"
              v-if="!showEquipmentTypeEdit"
            ></image>
            <image
              class="equipment-type-right-icon"
              :src="baseStaticUrl + '/static/my-img/shezhi_arrow2@2x.png'"
              mode="widthFix"
              v-else
            ></image>
          </view>
          <!-- <view v-if="showEquipmentTypeEdit">
						<view v-if="isEditEquipmentType" class="add" @click="equipmentTypeSelectShow = true">
							<image :lazy-load="true" class="image" src="https://weitongshu.oss-cn-shenzhen.aliyuncs.com/runboshi/plus.png" mode="widthFix"></image>
							<text class="content">新增</text>
							<u-select v-model="equipmentTypeSelectShow" mode="mutil-column-auto" :list="equipmentTypeOptions" @confirm="equipmentTypeSelectConfirm"></u-select>
						</view>
						<view class="edit" @click="isEditEquipmentType = !isEditEquipmentType">
							<image :lazy-load="true" class="image" src="https://weitongshu.oss-cn-shenzhen.aliyuncs.com/runboshi/edit.png" mode="widthFix"></image>
							<text class="content">{{ isEditEquipmentType ? '完成' : '编辑'}}</text>
						</view>
					</view> -->
          <view class="content"
            ><text class="text"
              >维保结束：{{
                equipment.maintenanceEndTime !== null &&
                equipment.maintenanceEndTime !== ""
                  ? getDateTime(equipment.maintenanceEndTime)
                  : "暂无"
              }}</text
            ></view
          >
        </view>
      </view>
      <view class="equipment-info">
        <view class="title">客户信息</view>
        <view class="info">
          <view class="content"
            ><text class="text"
              >客户名称：{{
                equipment.enterpriseName !== null &&
                equipment.enterpriseName !== ""
                  ? equipment.enterpriseName
                  : "暂无"
              }}</text
            ></view
          >
          <view class="content">
            <!-- <text v-if="!showContact" class="text">联系人：****</text> -->
            <text class="text"
              >联系人：{{
                equipment.keyContact !== undefined &&
                equipment.keyContact !== null &&
                equipment.keyContact !== ""
                  ? showContact
                    ? equipment.keyContact
                    : "****"
                  : "暂无"
              }}</text
            >
            <image
              class="contact-right-icon"
              :src="baseStaticUrl + '/static/my-img/eye@2x.png'"
              mode="widthFix"
              v-if="!showContact"
              @click="showContact = true"
            ></image>
            <image
              class="contact-right-icon"
              :src="baseStaticUrl + '/static/my-img/eye_h@2x.png'"
              mode="widthFix"
              v-else
              @click="showContact = false"
            ></image>
          </view>
        </view>
      </view>
      <view class="equipment-info">
        <view class="title">设备维护人员</view>
        <view class="info">
          <view class="content"
            ><text class="text"
              >设备维护人员：{{
                equipment.responsibilityEngineer !== null &&
                equipment.responsibilityEngineer !== ""
                  ? equipment.responsibilityEngineer
                  : "暂无"
              }}<!-- /18380427298 --></text
            ></view
          >
        </view>
      </view>
      <view class="equipment-info">
        <view class="title">附件信息</view>
        <view class="info">
          <view class="imgs">
            <image
              class="image"
              :src="baseStaticUrl + '/static/my-img/shebei@2x.png'"
              @click="
                previewImage([baseStaticUrl + '/static/my-img/shebei@2x.png'])
              "
              mode="aspectFill"
            ></image>
            <image
              class="image"
              :src="baseStaticUrl + '/static/my-img/sehzhi_photo@2x.png'"
              mode="aspectFill"
            ></image>
            <image
              class="image"
              :src="baseStaticUrl + '/static/my-img/sehzhi_photo@2x.png'"
              mode="aspectFill"
            ></image>
            <image
              class="image"
              :src="baseStaticUrl + '/static/my-img/sehzhi_photo@2x.png'"
              mode="aspectFill"
            ></image>
          </view>
        </view>
      </view>
    </view>
    <view class="qrcode-view" v-if="showQRCode">
      <image
        class="qrcode"
        :src="baseStaticUrl + '/static/my-img/CRUN 小程序体验版二维码.jpg'"
        mode="widthFix"
      ></image>
      <view>
        <image
          class="close-icon"
          :src="baseStaticUrl + '/static/my-img/shop_cancel@2x.png'"
          mode="widthFix"
          @click="showQRCode = false"
        ></image>
      </view>
    </view>
    <!-- 服务申请记录 -->
    <view v-if="current === 1">
      <view class="service-records" v-if="serviceOrderRecords.length !== 0">
        <view
          class="service-record"
          v-for="serviceOrderRecord in serviceOrderRecords"
          :key="serviceOrderRecord.id"
          :class="[
            serviceOrderRecord.status !== 2 || serviceOrderRecord.status !== 3
              ? ''
              : 'finished',
          ]"
          @click="openServiceRecordDetail(serviceOrderRecord)"
        >
          <image
            :lazy-load="true"
            class="icon"
            src="https://weitongshu.oss-cn-shenzhen.aliyuncs.com/runboshi/service-record-icon.png"
            mode="widthFix"
          ></image>
          <view class="info">
            <text class="title">{{
              title(
                serviceOrderRecord.equipmentId,
                serviceOrderRecord.serviceType
              )
            }}</text>
            <text class="time"
              >申请时间：{{
                getDateTime(serviceOrderRecord.creationTime)
              }}</text
            >
          </view>
          <image
            :lazy-load="true"
            class="status-icon"
            :src="
              serviceOrderRecord.status !== 2 || serviceOrderRecord.status !== 3
                ? 'https://weitongshu.oss-cn-shenzhen.aliyuncs.com/runboshi/in-process.png'
                : 'https://weitongshu.oss-cn-shenzhen.aliyuncs.com/runboshi/finished.png'
            "
            mode="widthFix"
          ></image>
          <text class="status-text">
            {{
              serviceOrderRecord.status == 0
                ? "待审核"
                : serviceOrderRecord.status == 1
                ? "进行中"
                : serviceOrderRecord.status == 2
                ? "已完成"
                : serviceOrderRecord.status == 3
                ? "已关闭"
                : ""
            }}
          </text>
        </view>
      </view>
      <view v-else class="maintenance-view">
        <view class="maintenance-record-group">
          <view class="info">
            <view class="check-date-view">
              <text class="check-date">暂无服务记录！</text>
            </view>
          </view>
        </view>
      </view>
      <!-- <view v-else style="text-align: center;">暂无服务记录！</view> -->
    </view>
    <!-- 维护记录 -->
    <view v-if="current === 2">
      <view class="maintenance-view" v-if="maintenanceRecords.length !== 0">
        <view
          class="maintenance-record-group"
          v-for="maintenanceRecord in maintenanceRecords"
          :key="maintenanceRecord.id"
        >
          <view class="info" @click="toggleFold(maintenanceRecord)">
            <view class="check-date-view">
              <image
                :lazy-load="true"
                class="check-date-icon"
                :src="baseStaticUrl + '/static/my-img/jiancha 2@2x.png'"
                mode="widthFix"
              ></image>
              <text class="check-date"
                >检查日期：{{
                  maintenanceRecord.checkTime !== null &&
                  maintenanceRecord.checkTime !== ""
                    ? getDateTime(maintenanceRecord.checkTime)
                    : ""
                }}</text
              >
              <text v-if="!maintenanceRecord.hasException" class="status-normal"
                >正常</text
              >
              <text v-else class="status-error">异常</text>
            </view>
            <u-icon
              class="fold-icon"
              name="arrow-up"
              size="28"
              color="838383"
              v-if="maintenanceRecord.fold"
            ></u-icon>
            <u-icon
              class="fold-icon"
              name="arrow-down"
              size="28"
              color="838383"
              v-else
            ></u-icon>
          </view>
          <view class="maintenance-records" v-show="!maintenanceRecord.fold">
            <!-- <view class="maintenance-record">
							<text class="title">有无异常</text>
							<text class="value">20°C</text>
						</view> -->
            <view class="maintenance-record">
              <view class="line-info">
                <text class="title">描述</text>
                <text class="value">{{
                  maintenanceRecord.description !== null &&
                  maintenanceRecord.description.length !== 0
                    ? ""
                    : "无"
                }}</text>
              </view>
              <view
                class="description"
                v-if="
                  maintenanceRecord.description !== null &&
                  maintenanceRecord.description.length !== 0
                "
                >{{ maintenanceRecord.description }}</view
              >
              <view
                class="image-view"
                v-if="maintenanceRecord.attachments.length !== 0"
              >
                <image
                  v-for="attachment in maintenanceRecord.attachments"
                  :key="attachment.id"
                  class="image"
                  :src="baseUrl + attachment.imagePath"
                  mode="widthFix"
                  @click="
                    previewImage(
                      maintenanceRecord.attachments.map(
                        (item) => baseUrl + item.imagePath
                      )
                    )
                  "
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="maintenance-view">
        <view class="maintenance-record-group">
          <view class="info">
            <view class="check-date-view">
              <text class="check-date">暂无维护记录！</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import { getDateTime } from "@/common/util.js";
/* 设备数字档案 */
import {
  getEquipmentTypeOptions,
  putEquipmentEquipmentType,
  deleteEquipmentEquipmentType,
} from "@/common/api/equipment-type.js";
/* 服务申请记录 */
import { getEquipmentOptions } from "@/common/api/equipment.js";
import { getServiceTypeEnum } from "@/common/api/service-project.js";
import { getServiceOrderRecords2 } from "@/common/api/service-order-record.js";
/* 维护记录 */
import { getMaintenanceRecords2 } from "@/common/api/maintenance-record.js";

export default {
  data() {
    return {
      baseStaticUrl: "",
      baseUrl: "",
      current: 0,
      segments: [
        {
          current: 0,
          label: "设备档案",
        },
        {
          current: 1,
          label: "服务申请记录",
        },
        {
          current: 2,
          label: "维护记录",
        },
      ],
      equipment: null,

      /* 设备档案 */
      // 分类
      equipmentTypeSelectShow: false,
      equipmentTypeOptions: [],
      isEditEquipmentType: false,
      currentEquipmentTypeName: "",
      deleteTypeViewShow: false,
      equipmentTypes: [],
      showEquipmentTypeEdit: false,
      // 其他
      showContact: false,
      showQRCode: false,
      /* 服务申请记录 */
      serviceTypeOptions: [],
      equipmentOptions: [],
      serviceOrderRecords: [],

      /* 维护记录 */
      maintenanceRecords: [],
      listQuery: {
        search: null,
        page: 1,
        limit: 20,
        sort: {
          id: "",
        },
        equipmentId: null,
      },
    };
  },
  async onLoad(e) {
    if (e.equipment !== undefined) {
      this.equipment = JSON.parse(decodeURIComponent(e.equipment));
      /* 设备数字档案 */
      this.equipmentTypes = this.equipment.equipmentType
        .split(",")
        .filter((item) => item !== "");
      /* 维护记录 */
      this.listQuery.equipmentId = this.equipment.id;
    }

    this.init();
    await this.initData();
  },
  computed: {
    title: function () {
      return (equipmentId, serviceType) => {
        // console.log(serviceType)
        if (
          this.equipmentOptions.length !== 0 &&
          this.serviceTypeOptions.length !== 0
        ) {
          const equipmentName = this.equipmentOptions.filter(
            (item) => item.value === equipmentId
          )[0].label;
          const type = this.serviceTypeOptions.filter(
            (item) => item.value === serviceType
          )[0].label;
          return equipmentName + "申请的" + type + "服务";
        } else {
          return "";
        }
      };
    },
  },
  async onPullDownRefresh() {},
  async onReachBottom() {
    if (this.current === 2) {
      this.listQuery.page++;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      await this.getMaintenanceRecords();
    }
  },
  methods: {
    getDateTime,
    init() {
      this.baseStaticUrl = app.globalData.baseStaticUrl;
      this.baseUrl = app.globalData.baseUrl;
    },
    async initData() {
      /* 设备数字档案 */
      await this.getEquipmentTypeOptions();
      /* 服务申请记录 */
      await this.getEquipmentOptions();
      await this.getServiceTypeEnum();
      await this.getServiceOrderRecords();
      /* 维护记录 */
      await this.getMaintenanceRecords();
    },
    async toggleList(cur) {
      this.current = cur;
      // uni.setNavigationBarTitle({
      // 	title: this.segments[cur].label
      // })
      switch (this.current) {
        case 0:
          break;
        case 1:
          break;
        case 2:
          break;
      }
    },
    /* 设备数字档案 */
    async getEquipmentTypeOptions() {
      await getEquipmentTypeOptions().then((response) => {
        this.equipmentTypeOptions = response;
      });
    },
    async equipmentTypeSelectConfirm(e) {
      if (e[1] !== undefined) {
        await putEquipmentEquipmentType({
          equipmentId: this.equipment.id,
          equipmentTypeId: e[1].value,
        }).then((response) => {
          // 从UI上新增该分类
          this.equipmentTypes.push(e[1].label);

          this.$refs.uToast.show({
            title: "新增类型：" + e[1].label,
            type: "success",
            url: "",
          });
          uni.$emit("change-page", 2);
        });
      }
    },
    deleteEquipmentType(equipmentType) {
      if (this.isEditEquipmentType) {
        this.currentEquipmentTypeName = equipmentType;
        this.deleteTypeViewShow = true;
      }
    },
    async deleteEquipmentTypeConfirm() {
      await deleteEquipmentEquipmentType({
        equipmentId: this.equipment.id,
        equipmentTypeName: this.currentEquipmentTypeName,
      }).then((response) => {
        // 从UI上去除该分类
        this.equipmentTypes.splice(
          this.equipmentTypes.findIndex(
            (item) => item === this.currentEquipmentTypeName
          ),
          1
        );

        this.$refs.uToast.show({
          title: "删除分类 " + this.currentEquipmentTypeName + " 成功！",
          type: "success",
          url: "",
        });
        uni.$emit("change-page", 2);
      });
    },
    /* 服务申请记录 */
    async getEquipmentOptions() {
      await getEquipmentOptions().then((response) => {
        this.equipmentOptions = response;
      });
    },
    async getServiceTypeEnum() {
      await getServiceTypeEnum().then((response) => {
        this.serviceTypeOptions = response;
      });
    },
    async getServiceOrderRecords() {
      await getServiceOrderRecords2({ equipmentId: this.equipment.id }).then(
        (response) => {
          this.serviceOrderRecords = response;
        }
      );
    },
    openServiceRecordDetail(e) {
      uni.navigateTo({
        url:
          "/pages/service-order-detail/service-order-detail?serviceOrderRecord=" +
          encodeURIComponent(JSON.stringify(e)),
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    /* 维护记录 */
    async getMaintenanceRecords() {
      await getMaintenanceRecords2(this.listQuery)
        .then((response) => {
          uni.hideLoading();
          const { list, total } = response;
          list.forEach((e) => {
            e.fold = true;
          });
          this.maintenanceRecords.push(...list);
          if (this.listQuery.page === 1) {
            // if (this.maintenanceRecords.length !== 0) {
            // 	this.maintenanceRecords[0].fold = false
            // }
          } else if (list.length == 0) {
            this.listQuery.page--;
            if (this.listQuery.page !== 1) {
              uni.showToast({
                title: "暂无更多维护记录",
                icon: "none",
              });
            }
          }
        })
        .catch(() => {
          uni.hideLoading();
        });
    },
    // 查看图片
    previewImage(imageSrcs) {
      uni.previewImage({
        current: 0,
        urls: imageSrcs,
      });
    },
    toggleFold(e) {
      e.fold = !e.fold;
      this.$forceUpdate();
    },
    openService() {
      uni.$emit("change-page", 1);
      uni.$emit("toggle-page", 1);
      uni.navigateBack({
        delta: 2,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main,
page {
  min-height: calc(100vh - var(--window-top));
  position: relative;
}
.segment {
  display: flex;
  flex-direction: row;
  background-color: #fff;

  .segment-item {
    flex: 1;
    text-align: center;

    .segment-item-text {
      display: inline-block;
      padding: 20rpx 0;
      font-size: 28rpx;
      color: #434343;

      &.active {
        border-bottom: 5rpx solid #3f7dff;
        color: #3F7DFF;
      }
    }
  }
}
/* 设备数字档案 */
.equipment-infos {
  padding: 30rpx;

  .equipment-info {
    background-color: #fff;
    margin-bottom: 20rpx;
    border-radius: 8rpx;

    .title {
      position: relative;
      line-height: 80rpx;
      padding-left: 30rpx;
      padding-right: 140rpx;
      // border-bottom: 3rpx solid #eee;
      font-size: 28rpx;
      color: #333;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 20rpx;
        // width: 6rpx;
        width: 2px;
        height: 40rpx;
        background-color: #3F7DFF;
      }
    }
  }
  .info {
    padding: 0 30rpx;
    font-size: 28rpx;
    color: #333;

    > .content {
      padding-bottom: 20rpx;
      display: flex;
      flex-direction: row;
      // line-height: 50rpx;

      .text {
        flex: 1;

        .service-provider {
          border-bottom: 3rpx solid #3F7DFF;
          color: #3F7DFF;
        }
      }
      .qrcode {
        color: #3F7DFF;
        // font-size: 30rpx;
      }
      .equipment-type-right-icon {
        width: 32rpx;
      }
      .equipment-type-view {
        display: inline;

        .equipment-type {
          display: inline;

          .equipment-type-text {
            &.delete-operation {
              border: 3rpx solid #f66;
              border-radius: 10rpx;
              padding: 0 5rpx;

              .delete {
                color: #f66;
                padding-left: 6rpx;
              }
            }
          }
        }
      }
      .contact-right-icon {
        width: 40rpx;
      }
    }
    .edit {
      // flex: 1;
      // text-align: right;
      display: inline-block;

      .image {
        width: 20rpx;
        vertical-align: middle;
        margin-right: 5rpx;
      }
      .content {
        color: #ff740b;
        font-size: 26rpx;
        line-height: 60rpx;
      }
    }
    .add {
      // flex: 1;
      // text-align: right;
      margin-right: 20rpx;
      display: inline-block;

      .image {
        width: 20rpx;
        vertical-align: middle;
        margin-right: 5rpx;
      }
      .content {
        color: #99f;
        font-size: 26rpx;
        line-height: 60rpx;
      }
    }
    .imgs {
      // border: 3rpx solid #e0e0e0;

      .image {
        // display: inline-block;
        width: 144rpx;
        height: 144rpx;
        margin-right: 16rpx;
        margin-bottom: 20rpx;
        // border: 3rpx solid #e0e0e0;

        &:nth-child(5n-1) {
          margin-right: 0;
        }
      }
    }
  }
}
.qrcode-view {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;

  .qrcode {
    width: 450rpx;
    border-radius: 5rpx;
    margin-top: 250rpx;
  }
  .close-icon {
    width: 70rpx;
    height: 70rpx;
    margin-top: 50rpx;
  }
}
/* 服务申请记录 */
.service-records {
  // padding: 0 30rpx;
  padding: 30rpx;
  position: relative;
  // top: -60rpx;

  .service-record {
    display: flex;
    flex-direction: row;
    background-color: #2d63ba;
    padding: 30rpx;
    border-radius: 10rpx;
    margin-bottom: 30rpx;
    position: relative;
    overflow: hidden;

    &:last-child {
      margin-bottom: 0;
    }
    &.finished {
      background-color: #aaa;
    }
    .icon {
      width: 60rpx;
      margin: auto;
    }
    .info {
      flex: 1;
      color: #fff;
      padding-left: 20rpx;
      padding-right: 170rpx;

      .title {
        display: block;
        line-height: 60rpx;
        font-size: 30rpx;
        font-weight: 700;

        overflow: hidden;
        word-break: break-all; /* break-all(允许在单词内换行。) */
        text-overflow: ellipsis; /* 超出部分省略号 */
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 1; /** 显示的行数 **/
      }
      .time {
        display: block;
        line-height: 60rpx;
        font-size: 24rpx;
      }
    }
    .status-icon {
      position: absolute;
      width: 200rpx;
      right: -40rpx;
      top: -56rpx;
    }
    .status-text {
      position: absolute;
      right: 20rpx;
      top: 30rpx;
      color: #fff;
      transform: rotate(-40deg);
    }
  }
}
/* 维护记录 */

.maintenance-view {
  padding: 30rpx;
}
.maintenance-record-group {
  background-color: #fff;
  padding: 30rpx;
  // margin: 30rpx;
  margin-bottom: 30rpx;
  border-radius: 10rpx;

  &:last-child {
    margin-bottom: 0;
  }
  .info {
    display: flex;
    flex-direction: row;

    .check-date-view {
      flex: 1;

      .check-date-icon {
        width: 50rpx;
        vertical-align: middle;
      }
      .check-date {
        padding: 0 20rpx;
        font-size: 30rpx;
        font-weight: 700;
        color: #434343;
      }
      .status-normal,
      .status-error {
        font-size: 24rpx;
        padding: 0 8rpx;
        border: 3rpx solid #000;
        border-radius: 20rpx;
        border-bottom-left-radius: 0;
      }
      .status-normal {
        border-color: #6cca92;
        color: #6cca92;
      }
      .status-error {
        border-color: #f56e56;
        color: #f56e56;
      }
    }
    .fold-icon {
      vertical-align: middle;
    }
  }
  .maintenance-records {
    padding: 20rpx 0;

    .maintenance-record {
      padding: 20rpx;
      padding-left: 30rpx;
      font-size: 28rpx;
      font-weight: 700;
      background-color: #e8edf4;
      color: #636363;
      border-radius: 5rpx;
      margin-bottom: 10rpx;
      position: relative;
      // display: flex;
      // flex-direction: column;

      &:last-child {
        margin-bottom: 0;
      }
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 8rpx;
        height: 30rpx;
        margin-top: -15rpx;
        border-radius: 5rpx;
        background-color: #3bbcba;
      }
      .line-info {
        // flex: 1;

        .title {
          // flex: 1;
        }
        .value {
          float: right;
        }
      }
      .description {
        // flex: 1;
        padding: 10rpx 0;

        overflow: hidden;
        word-break: break-all; /* break-all(允许在单词内换行。) */
        text-overflow: ellipsis; /* 超出部分省略号 */
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        // -webkit-line-clamp: 3; /** 显示的行数 **/
      }

      .image-view {
        // display: flex;
        // flex-direction: row;
        padding: 20rpx;

        .image {
          // flex: 1;
          width: 100%;
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>